<template>
	<view class="page_box" style="height: 100%;">
    <!-- 导航栏 -->
    <shopro-navbar :isBack="true" :backIconColor="'#000'">
      <view class="head_box" slot="content">
        <u-search shape="square" action-text="" :action-style="{'display':'none'}" v-model="searchVals" padding="30rpx" placeholder="输入店铺名称" height="64" @search="onSearch" @clear="clearSearch"></u-search>
      </view>
    </shopro-navbar>
		<!-- 搜索框 -->
		<view class="content_box">
			<!-- 搜索历史 -->
			<view class="search-history">
				<view class="title-box u-flex u-row-between u-m-b-40">
					<view class="title">我的搜索记录</view>
          <u-icon size="36" name="trash" class="clear-history-btn" @click="showModals()"></u-icon>
				</view>
				<view class="content u-flex u-col-center u-row-left u-flex-wrap">
<!--					<button class="item u-reset-button u-m-b-20 u-m-r-20  u-ellipsis-1" @tap="onSearch(item)" v-for="(item, index) in historyTag" :key="index">{{ item }}</button>-->
          <view v-for="(item, index) in historyTag" :key="index">
            <view class="tags" @click.stop="onSearch(item)">{{item}} <view class="colesed" @click.stop="tagClick(item)"  v-if="showModal"><u-icon size="36" name="close-circle-fill"></u-icon></view></view>
          </view>
        </view>
			</view>
		</view>

		<!-- modal -->
<!--		<u-modal-->
<!--			ref="uModal"-->
<!--			v-model="showModal"-->
<!--			:show-cancel-button="true"-->
<!--			confirm-color="#e9b461"-->
<!--			cancel-color="#666666"-->
<!--			@confirm="clearSearchHistory"-->
<!--			confirm-text="清除"-->
<!--			cancel-text="取消"-->
<!--			content="是否清除历史搜索记录？"-->
<!--			title="提示"-->
<!--		></u-modal>-->
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
      searchVals: '',
			historyTag: [],
			showModal: false
		};
	},
	computed: {},
	onShow() {
    this.searchVals = '';
		this.historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
	},
	methods: {
		// 搜索
		onSearch(e) {
			if (e && !this.historyTag.includes(e)) {
				let searchHistoryArr = JSON.stringify(this.getArr(this.historyTag, e));
				uni.setStorageSync('searchHistoryArr', searchHistoryArr);
			}
			this.$Router.push(`/pages/goods/list?keywords=${e}`);
			this.searchVals = '';
		},
    tagClick(index) {
      let indexs = this.historyTag.findIndex(function (item) { return item === index; });
      this.historyTag.splice(indexs,1)
      uni.setStorageSync('searchHistoryArr',JSON.stringify(this.historyTag));
      this.showModal = false;
      uni.showToast({
        title: '清除成功',
        // 如果不需要图标，请设置为false
        icon: "none"
      })
    },
    showModals(){
      this.showModal = true;
      console.log("this.showModal=============",this.showModal)
    },
		// 清除输入框
		clearSearch() {
			this.searchVals = '';
		},
		// 队列
		getArr(list, item) {
			let arr = list;
			let length = 10; //队列长度
			arr.length < length ? arr.unshift(item) : arr.pop();
			return arr;
		},
		// 清除历史记录
		clearSearchHistory() {
			this.historyTag = [];
			uni.removeStorageSync('searchHistoryArr');
		},
	}
};
</script>

<style lang="scss">
.page_box {
	background-color: #fff;
}
.search-history {
	padding: 30rpx;
	.title-box {
		.title {
			font-size: 30rpx;
			font-weight: bold;
			 color: #999999;
		}
		.clear-history-btn {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.content {
		width: 100%;
		.item {
			padding: 0 20rpx;
			line-height: 60rpx;
			background: #f5f6f8;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			max-width: 690rpx;
		}
	}
}
/deep/.search-item.u-mode-light-info{
  position: relative;
  margin-right: 20rpx;
}
/deep/.search-item .u-icon-wrap{
  position: absolute;
  top: -20rpx;
  right: -24rpx;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  height: 40rpx;
  .u-close-icon{
    margin-left: 18rpx;
  }
  .u-icon__icon--info{
    left:-6rpx;
    color:#fff;
  }
}
.tags{
  background-color: #f4f4f5;
  color: #909399;
  border: 2rpx solid #c8c9cc;
  font-size: 22rpx;
  padding: 10rpx 32rpx;
  position: relative;
  border-radius: 52rpx;
  margin-right: 10rpx;
  .colesed{
    position: absolute;
    top: -16rpx;
    right: -12rpx;
  }
}
</style>
